<template>
  <div class="item5-parent">
    <div class="tab-box-item">
      <t-tabs v-model="cruuent" @change="changeTab">
        <t-tab-panel :value="item.value" :label="item.title" v-for="item in tabList" :key="item.value"> </t-tab-panel>
      </t-tabs>
      <seachInput @onEnterValue="onEnterValue" v-model="parmas.value" />
    </div>
    <!-- <t-row> 
      <t-col :span="4" v-for="(item, index) in tabList1" :key="item.value"> 
        <div
          @click="clickTab(item.value)"
          class="col-item hw-flex-style-c-c hw-click-cursor"
          :class="{ 'col-item-solid': index == 1, 'col-active': parmas.CommentStatus == item.value }"
        >
          {{ item.title }} 
        </div>   
      </t-col>    
    </t-row> -->
    <div class="comment-parent">
      <div class="comment-box" @scroll="scrollEvent">
        <comment :info="item" v-for="item in list" :key="item.id" @replySuccess="replySuccess" />

        <isnull title="暂无消息" v-if="list.length == 0" />
      </div>

      <!-- <t-row style="border: none">
        <t-col :span="12">
          <t-pagination
            v-model="parmas.pageNo"
            v-model:pageSize="parmas.pageSize"
            :total="total"
            :border="false"
            show-sizer
            :show-page-size="true"
            :page-size-options="pageSizeOptions"
            @page-size-change="onPageSizeChange"
            @current-change="onCurrentChange"
          />
        </t-col>
      </t-row> -->
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import seachInput from '@/components/seach/seach.vue';
import isnull from '@/components/isnull/isNull.vue';
import { commentList } from '@/api/comment/comment';
import { reactive, ref } from 'vue';
import { tabList, tabList1 } from './data';
import comment from '@/components/comment/comment.vue';
import { useRoute } from 'vue-router';
const pageSizeOptions = [
  { label: '每页 10 条', value: 10 },
  { label: '每页 20 条', value: 20 },
  { label: '每页 50 条', value: 50 },
  { label: '每页 100 条', value: 100 },
];
const route = useRoute();
const parmas = reactive({
  CommentStatus: -1, //
  showpieceId: 1, //展品主键
  projectId: localStorage.getItem('projectId'), //项目主键
  value: '', //关键字
  pageNo: 1,
  pageSize: 30,
  isSelf: 0,
});
const cruuent = ref(1);
const cruuent1 = ref(1);
if (route.query.tration) {
  cruuent.value = Number(route.query.tration);
  if (cruuent.value === 1) {
    parmas.showpieceId = 1;
  } else {
    parmas.showpieceId = 0;
  }
}
const clickTab = (e: number) => {
  console.log(tabList1, 13);

  parmas.CommentStatus = e;
  parmas.pageNo = 1;
  list.value = [];
  init();
};
const list = ref([]);
const total = ref(0);
const init = async () => {
  try {
    let { data } = await commentList(parmas);
    total.value = data.total;
    list.value = data.data;
    if (list.value.length < total.value) {
    } else {
    }
  } catch {}
};
const changeTab = () => {
  if (cruuent.value === 1) {
    parmas.showpieceId = 1;
  } else {
    parmas.showpieceId = 0;
  }
  parmas.pageNo = 1;
  list.value = [];
  init();
  console.log(cruuent.value);
};
const onEnterValue = (e: string) => {
  parmas.pageNo = 1;
  init();
  //搜索事件
};
const scrollEvent = (e) => {
  // 获取滚动时的高度
  const ele = e.srcElement ? e.srcElement : e.target;
  // 监听滚动到div底部
  if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 10) {
    // console.log('滚动到底l');
    // this.loading = true; //底部设置一个loading 开启加载动画
    if (flag.value === false && total.value > parmas.PageNo) {
      parmas.PageNo = parmas.PageNo + 1;
      init();
    }
  }
};

const replySuccess = () => {
  init();
};

init();
</script>

<style lang="less" scoped>
.t-row {
  border: 1px solid #dcdcdc;
}
.t-col {
  margin-bottom: 0;
}
.col-item {
  // width: 100%;
  height: 32px;
}
.col-item-solid {
  background: #ffffff;
  border-radius: 2px;
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
}
.col-active {
  width: 100%;
  height: 32px;
  background: #e62b17;
  border-radius: 2px 0px 0px 2px;
  color: #ffffff;
}
.comment-parent {
  flex: 1;
  display: flex;
  flex-direction: column;

  .comment-box {
    height: 100%;

    overflow: scroll;
  }
}
.tab-box-item {
  display: flex;
  justify-content: space-between;
  height: 48px;
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
}
.item5-parent {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
